<section class='game-overview'>
<div class='header-jumbotron'>
<ui-drop-group class='btn-more' ng-if='isOffServer()'>
<ui-drop-btn btn-class='md-raised' style-type='md-button'>
<div class='fa fa-ellipsis-v'></div>
</ui-drop-btn>
<ui-drop class='pull-right'>
<ui-drop-header>Stats Period</ui-drop-header>
<ui-drop-item ng-class="{'active-tick': GameOverview.displayOptions.statInterval == 8}">
<a ng-click='GameOverview.displayOptions.statInterval = 8'>1 hour</a>
</ui-drop-item>
<ui-drop-item ng-class="{'active-tick': GameOverview.displayOptions.statInterval == 180}">
<a ng-click='GameOverview.displayOptions.statInterval = 180'>24 hours</a>
</ui-drop-item>
<ui-drop-item ng-class="{'active-tick': GameOverview.displayOptions.statInterval == 1440}">
<a ng-click='GameOverview.displayOptions.statInterval = 1440'>7 days</a>
</ui-drop-item>
<!--
<ui-drop-divider></ui-drop-divider>
<ui-drop-item ng-class="{'active-tick': GameOverview.displayOptions.statNormalize}">
<a ng-click='GameOverview.displayOptions.statNormalize = !GameOverview.displayOptions.statNormalize'>
Normalize by tick duration
</a>
</ui-drop-item>
-->
</ui-drop>
</ui-drop-group>
<h1>Overview</h1>
</div>
<div class='row'>
<div class='col-xs-6'>
<div class='overview-block overview-rank-block overview-gcl'>
<div class='overview-rank-left'>
<div class='overview-level-icon' uib-tooltip-html="('Next level: &lt;strong&gt;'+(GameOverview.getGclCurrentProgress() | number:0)+'&lt;/strong&gt; / '+(GameOverview.getGclNeededProgress() | number:0)) | trust">
<div class='overview-level-icon-title'>GCL</div>
{{GameOverview.getGcl()}}
<svg height='10%' viewbox='0 0 110 110' width='10%'>
<g transform='translate(55,55)'>
<ellipse cx='0' cy='0' rx='50' ry='50'></ellipse>
<path ng:attr-d='M 50 0 A 50 50 0 {{ (GameOverview.getGclCurrentProgress() ) &lt; GameOverview.getGclNeededProgress() / 2 ? 0 : 1 }} 1 {{50*Math.cos(Math.PI * 2 * (GameOverview.getGclCurrentProgress()) / GameOverview.getGclNeededProgress())}} {{50*Math.sin(Math.PI * 2 * (GameOverview.getGclCurrentProgress()) / GameOverview.getGclNeededProgress())}}' transform='rotate(-90)'></path>
</g>
</svg>
</div>
<div>
<div class='gcl-title'>Global Control Level</div>
<div class='gcl-rooms'>
<span>Rooms:</span>
<strong>{{GameOverview.getGcl()}}</strong>
</div>
<div class='gcl-cpu' ng-if='isOffServer() &amp;&amp; Me().cpu &gt;= 30 &amp;&amp; isMultiShard()'>
<span>CPU:</span>
<strong>{{Me().getCpu()}}</strong>
</div>
<div class='gcl-cpu' ng-if='isOffServer() &amp;&amp; Me().cpu &gt;= 30 &amp;&amp; !isMultiShard()'>
<span>CPU:</span>
<strong>{{Me().cpu}}</strong>
</div>
<div class='gcl-cpu gcl-cpu--limited' ng-if='isOffServer() &amp;&amp; Me().cpu &lt; 30'>
<span>CPU:</span>
<strong>{{Me().cpu}}</strong>
<a class='fa fa-exclamation-triangle' href='#!/enter' tooltip-placement='bottom' uib-tooltip-html="'Your CPU is limited.&lt;br&gt;Order a subscription to raise your CPU limit to ' + Me().getCpu()+'.&lt;br&gt;(click to learn more)' | trust"></a>
</div>
<div class='gcl-cpu' ng-if='!isOffServer()'>
<span>CPU:</span>
<strong>{{Me().cpu}}</strong>
</div>
</div>
</div>
<div class='overview-rank-right' ng-if='isOffServer()'>
<div class='rank-icon' ng:if='!_.isUndefined(GameOverview.data.leaderboardWorld.rank)'>#{{GameOverview.data.leaderboardWorld.rank + 1}}</div>
<div class='rank-icon-empty' ng:if='_.isUndefined(GameOverview.data.leaderboardWorld.rank)'>No rank</div>
<div class='rank-season'>in {{GameOverview.data.seasons[0].name}}</div>
<a class='rank-leaderboard' ng:href="#!{{ 'top.game-lobby-world.list' | routeSegmentUrlStateless: {season: GameOverview.data.seasons[0]._id} }}?page={{(Math.floor(GameOverview.data.leaderboardWorld.rank / 10) + 1) || 1}}&amp;highlight={{GameOverview.data.leaderboardWorld.rank}}">
View leaderboard
</a>
</div>
<div class='overview-rank-right' ng-if='!isOffServer()'>
<div class='rank-not-supported'>Leaderboards<br>not available</div>
</div>
<a app-nw-external-link class='overview-rank-help' href='http://docs.screeps.com/control.html' target='_blank' uib-tooltip-html="'Learn&amp;nbsp;more&amp;nbsp;about&lt;br&gt;Global&amp;nbsp;Control&amp;nbsp;Level' | trust">
<i class='fa fa-question-circle'></i>
</a>
</div>
</div>
<div class='col-xs-6'>
<div class='overview-block overview-rank-block overview-power'>
<div class='overview-rank-left'>
<div class='overview-level-icon' uib-tooltip-html="('Next level: &lt;strong&gt;' + (GameOverview.getPlCurrentProgress() | number:0) + '&lt;/strong&gt; / ' + (GameOverview.getPlNeededProgress() | number:0)) | trust">
<div class='overview-level-icon-title'>GPL</div>
{{Me().getPowerLevel()}}
<svg height='10%' viewbox='0 0 110 110' width='10%'>
<g transform='translate(55,55)'>
<ellipse cx='0' cy='0' rx='50' ry='50'></ellipse>
<path ng:attr-d='M 50 0 A 50 50 0 {{ (GameOverview.getPlCurrentProgress() ) &lt; GameOverview.getPlNeededProgress() / 2 ? 0 : 1 }} 1 {{50*Math.cos(Math.PI * 2 * (GameOverview.getPlCurrentProgress()) / GameOverview.getPlNeededProgress())}} {{50*Math.sin(Math.PI * 2 * (GameOverview.getPlCurrentProgress()) / GameOverview.getPlNeededProgress())}}' transform='rotate(-90)'></path>
</g>
</svg>
</div>
<div>
<div class='power-title'>Global Power Level</div>
<a class='btn overview-power-btn' ng:href="#!{{ 'top.power' | routeSegmentUrlStateless }}">Manage Power Creeps</a>
</div>
</div>
<div class='overview-rank-right' ng-if='isOffServer()'>
<div class='rank-icon' ng:if='!_.isUndefined(GameOverview.data.leaderboardPower.rank)'>#{{GameOverview.data.leaderboardPower.rank + 1}}</div>
<div class='rank-icon-empty' ng:if='_.isUndefined(GameOverview.data.leaderboardPower.rank)'>No rank</div>
<div class='rank-season'>in {{GameOverview.data.seasons[0].name}}</div>
<a class='rank-leaderboard' ng:href="#!{{ 'top.game-lobby-power.list' | routeSegmentUrlStateless: {season: GameOverview.data.seasons[0]._id} }}?page={{(Math.floor(GameOverview.data.leaderboardPower.rank / 10) + 1) || 1}}&amp;highlight={{GameOverview.data.leaderboardPower.rank}}">
View leaderboard
</a>
</div>
<div class='overview-rank-right' ng-if='!isOffServer()'>
<div class='rank-not-supported'>Leaderboards<br>not available</div>
</div>
<a app-nw-external-link class='overview-rank-help' href='http://docs.screeps.com/power.html' target='_blank' uib-tooltip-html="'Learn&amp;nbsp;more&amp;nbsp;about&lt;br&gt;Global&amp;nbsp;Power&amp;nbsp;Level' | trust">
<i class='fa fa-question-circle'></i>
</a>
</div>
</div>
</div>
<app-profile-stats ng-if='isOffServer()' normalize='false' stats='GameOverview.data.overview.totals'></app-profile-stats>
<div class='overview-block' ng:if='GameOverview.getRoomsCount()'>
<div class='overview-rooms-controls' ng-if='isOffServer()'>
<div class='controls-group' ng:if="GameOverview.displayOptions.viewMode == 'list'">
<label>Graph:</label>
<ui:drop-select drop-class='pull-right' ng:model='GameOverview.displayOptions.statName' options="[{energyControl: 'Control points'}, {energyHarvested: 'Energy harvested'}, {energyConstruction: 'Energy spent on construction'}, {energyCreeps: 'Energy spent on creeps'}, {creepsProduced: 'Creeps produced'}, {creepsLost: 'Creeps lost'}, {powerProcessed: 'Power processed'}]" style-type='md-button'></ui:drop-select>
</div>
<md:button ng:class="{'md-primary': GameOverview.displayOptions.viewMode == 'list', 'md-raised': GameOverview.displayOptions.viewMode == 'list'}" ng:click="GameOverview.displayOptions.viewMode = 'list'" tooltip-placement='bottom' uib-tooltip='List view'>
<i class='fa fa-th-list'></i>
</md:button>
<md:button ng:class="{'md-primary': GameOverview.displayOptions.viewMode == 'grid', 'md-raised': GameOverview.displayOptions.viewMode == 'grid'}" ng:click="GameOverview.displayOptions.viewMode = 'grid'" tooltip-placement='bottom' uib-tooltip='Grid view'>
<i class='fa fa-th-large'></i>
</md:button>
</div>
<div class='overview-rooms overview-rooms-grid' ng:if="GameOverview.displayOptions.viewMode == 'grid'">
<div class='overview-shard' ng-if='shardData.rooms.length' ng-repeat='(shardName,shardData) in GameOverview.data.overview.shards'>
<h2>
<ng:pluralize count='shardData.rooms.length' when="{one: '{} room', other: '{} rooms'}"></ng:pluralize>
<div class='overview-shard__title'>on {{shardName}}</div>
</h2>
<a class='room-preview' ng:click='GameOverview.goToRoom(shardName,roomName)' ng:repeat='roomName in shardData.rooms'>
<img ng:src="{{GameOverview.mapUrl}}{{isShards() ? shardName+'/' : ''}}{{roomName}}.png">
<canvas app:game-map-room-objects='{{shardName}}/{{roomName}}' class='room-objects' height='150' map-scale='3' width='150'></canvas>
<div class='room-title'>
<span>{{roomName}}</span>
<i app:stop-click-propagation='~' class='fa fa-list' ng:click='GameOverview.goToRoomOverview(shardName,roomName)' title='Room Overview'></i>
</div>
</a>
</div>
</div>
<div class='overview-rooms overview-rooms-list' ng:class="'stat-'+GameOverview.loader.displayOptions.statName" ng:if="GameOverview.displayOptions.viewMode == 'list'">
<div class='punchcard-header'>
<div class='punchcard-header-title' ng:repeat='i in GameOverview.offsetLabels[GameOverview.loader.displayOptions.statInterval]'>{{i}}</div>
</div>
<div class='overview-shard' ng-if='shardData.rooms.length' ng-repeat='(shardName,shardData) in GameOverview.data.overview.shards'>
<h2 ng-if='isMultiShard()'>
<ng:pluralize count='shardData.rooms.length' when="{one: '{} room', other: '{} rooms'}"></ng:pluralize>
<div class='overview-shard__title'>on {{shardName}}</div>
</h2>
<div class='room-item' ng:repeat='roomName in shardData.rooms'>
<a class='room-preview' ng:click='GameOverview.goToRoom(shardName, roomName)' tooltip-placement='left' uib-tooltip='View room'>
<img ng:src="{{GameOverview.mapUrl}}{{isShards() ? shardName+'/' : ''}}{{roomName}}.png">
<canvas app:game-map-room-objects='{{shardName}}/{{roomName}}' class='room-objects' height='50' map-scale='1' width='50'></canvas>
</a>
<a class='room-title' ng:click='GameOverview.goToRoomOverview(shardName,roomName)'>{{roomName}}</a>
<app:punch-card data='shardData.stats[roomName]' interval='GameOverview.loader.displayOptions.statInterval' label="{energyHarvested: 'energy points', energyConstruction: 'energy points', energyCreeps: 'energy points', energyControl: 'points', creepsProduced: 'creep body parts', creepsLost: 'creep body parts', powerProcessed: 'power points'}[GameOverview.loader.displayOptions.statName]" max='GameOverview.loader.max'></app:punch-card>
</div>
</div>
</div>
</div>
</section>
